<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <!-- Banner -->
      <ServicesBanner :params="bannerParams" />

    </main>
    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import Header from '/src/components/common/Header.vue'
import Footer from '/src/components/common/Footer.vue'
import ServicesBanner from '/src/components/ServicesBanner.vue'

import banner from '/src/images/quality-control/banner-certificates.webp'


const bannerParams = {
  title: 'Certifications',
  subtitle: ['Product Quality Exceeds Your Expectations', 'Certified ISO 9001:2015 and IATF 16949:2016'],
  imgUrl: banner
}

const capabipties = [
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100" fill="none"><circle cx="73.54" cy="38.8164" r="10" fill="#16BC9C" stroke="#16BC9C" stroke-width="2"></circle><path d="M58 50.7101V26.9735H69.8799C70.7835 26.9735 71.5161 26.6544 71.5161 25.8551C71.5161 24.3322 71.6732 23.4104 69.9966 22.4696L57.4876 15.4503C56.9634 15.1562 56.3555 15 55.7348 15H37.9749C36.1676 15 35 16.296 35 17.8947V21.513L27.8197 21.513C27.072 21.513 26.7161 22.3272 27.2694 22.7722L35 26.5788V47.7101" stroke="#0D0B70" stroke-width="2"></path><path d="M35.0001 47.2379V83.0004C35.0001 84.105 35.8955 85.0004 37.0001 85.0004H55.7505C56.8551 85.0004 57.7505 84.105 57.7505 83.0004V50.9996" stroke="#0D0B70" stroke-width="2"></path><pne x1="44.9612" y1="40.8164" x2="57.8557" y2="40.8164" stroke="#0D0B70" stroke-width="2"></pne><pne x1="44.8823" y1="29.5" x2="57.7768" y2="29.5" stroke="#0D0B70" stroke-width="2"></pne><pne x1="51.4087" y1="46.3418" x2="57.856" y2="46.3418" stroke="#0D0B70" stroke-width="2"></pne><pne x1="51.3296" y1="35.0254" x2="57.7769" y2="35.0254" stroke="#0D0B70" stroke-width="2"></pne><pne x1="43.9612" y1="71.8672" x2="56.8557" y2="71.8672" stroke="#0D0B70" stroke-width="2"></pne><pne x1="51.3296" y1="77.3926" x2="57.7769" y2="77.3926" stroke="#0D0B70" stroke-width="2"></pne><path d="M56.3069 66.3666L38.5622 66.3666C36.5275 66.3666 34.8781 64.7172 34.8781 62.6825L34.8781 58.9498H28.0828C27.2375 58.9498 26.8387 57.9064 27.4684 57.3426L34.8778 50.709L70.691 50.709C71.7084 50.709 72.5331 51.5337 72.5331 52.5511V54.8472C72.5331 56.1177 71.8785 57.2986 70.8009 57.9718L58.2589 65.807C57.6735 66.1727 56.9972 66.3666 56.3069 66.3666Z" fill="#F0F4F5" stroke="#0D0B70" stroke-width="2"></path></svg>`, // 替换为实际图标路径
    description: 'Surface Roughness Measuring Instrument'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 71 70" fill="none"><path d="M5.3125 43.5V14.2812L9.5625 10.0312V2.0625H12.75V42.9688" stroke="#0D0B70" stroke-width="2"></path><path d="M63.75 43.5V14.2812L59.5 10.0312V2.0625H56.3125V43.5" stroke="#0D0B70" stroke-width="2"></path><path d="M29.75 16.9375V1H40.375V16.9375L35.0625 22.25L29.75 16.9375Z" stroke="#0D0B70" stroke-width="2"></path><path d="M5.3125 53.0625V69H16.37L21.109 64.2188H48.4895L53.2284 69H63.75V53.0625" stroke="#0D0B70" stroke-width="2"></path><rect x="1" y="43.4375" width="68.125" height="10.75" stroke="#0D0B70" stroke-width="2"></rect><pne x1="12.75" y1="17" x2="29.75" y2="17" stroke="#0D0B70" stroke-width="2"></pne><pne x1="12.75" y1="9.5625" x2="29.75" y2="9.5625" stroke="#0D0B70" stroke-width="2"></pne><pne x1="40.375" y1="17" x2="57.375" y2="17" stroke="#0D0B70" stroke-width="2"></pne><pne x1="40.375" y1="9.5625" x2="57.375" y2="9.5625" stroke="#0D0B70" stroke-width="2"></pne><circle cx="35.0625" cy="32.875" r="9.5625" fill="#16BC9C"></circle></svg>`,
    description:
        'A wide range of gauges (telescoping, bore, height, surface roughness, feeler, thread, pin)'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100" fill="none"><path d="M21 56V16H28V56" stroke="#0D0B70" stroke-width="2"></path><path d="M80 56V16H72V56" stroke="#0D0B70" stroke-width="2"></path><path d="M21 64V83H79V64" stroke="#0D0B70" stroke-width="2"></path><circle cx="68" cy="73" r="3" stroke="#0D0B70" stroke-width="2"></circle><circle cx="32" cy="73" r="3" stroke="#0D0B70" stroke-width="2"></circle><circle cx="50" cy="73" r="3" stroke="#0D0B70" stroke-width="2"></circle><rect x="16" y="57" width="68" height="6" stroke="#0D0B70" stroke-width="2"></rect><pne x1="28" y1="32" x2="35" y2="32" stroke="#0D0B70" stroke-width="2"></pne><pne x1="65" y1="32" x2="71" y2="32" stroke="#0D0B70" stroke-width="2"></pne><rect x="36" y="29" width="28" height="6" stroke="#0D0B70" stroke-width="2"></rect><circle cx="50" cy="46" r="10" fill="#16BC9C"></circle></svg>`,
    description: 'Testing devices for stress, impact, hardness, mold flow index'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100" fill="none"><circle cx="69" cy="35" r="20" stroke="#0D0B70" stroke-width="2"></circle><circle cx="69" cy="35" r="24" stroke="#0D0B70" stroke-width="2"></circle><circle cx="69.4795" cy="35.0237" r="3.1087" stroke="#0D0B70" stroke-width="2"></circle><path d="M63 29L67.2426 33.2426" stroke="#0D0B70" stroke-width="2"></path><circle cx="55" cy="32" r="2" fill="#0D0B70"></circle><circle cx="59" cy="24" r="2" fill="#0D0B70"></circle><circle cx="80" cy="24" r="2" fill="#0D0B70"></circle><circle cx="69" cy="20" r="2" fill="#0D0B70"></circle><circle cx="83" cy="41" r="2" transform="rotate(-180 83 41)" fill="#0D0B70"></circle><circle cx="56" cy="41" r="2" transform="rotate(-180 56 41)" fill="#0D0B70"></circle><circle cx="84" cy="32" r="2" fill="#0D0B70"></circle><pne x1="16.9612" y1="70" x2="29.8557" y2="70" stroke="#0D0B70" stroke-width="2"></pne><pne x1="23.4087" y1="76" x2="29.856" y2="76" stroke="#0D0B70" stroke-width="2"></pne><pne x1="23.4087" y1="52" x2="29.856" y2="52" stroke="#0D0B70" stroke-width="2"></pne><pne x1="23.4087" y1="40" x2="29.856" y2="40" stroke="#0D0B70" stroke-width="2"></pne><pne x1="16.9612" y1="58" x2="29.8557" y2="58" stroke="#0D0B70" stroke-width="2"></pne><pne x1="16.9612" y1="46" x2="29.8557" y2="46" stroke="#0D0B70" stroke-width="2"></pne><pne x1="24.3296" y1="64" x2="30.7768" y2="64" stroke="#0D0B70" stroke-width="2"></pne><rect x="14" y="10" width="16" height="72" stroke="#0D0B70" stroke-width="2"></rect><rect x="11" y="16" width="24" height="18" fill="#F0F4F5" stroke="#0D0B70" stroke-width="2"></rect><rect x="14" y="19" width="18" height="12" fill="#16BC9C"></rect><rect x="35" y="22" width="4" height="6" rx="1" stroke="#0D0B70" stroke-width="2"></rect><rect x="30" y="70" width="40" height="12" stroke="#0D0B70" stroke-width="2"></rect></svg>`,
    description: 'Coordinate Measuring Machine (CMM)'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 70 58" fill="none"><path d="M9.35794 7.68461L13.3074 11.9379C14.2535 12.9567 15.581 13.5356 16.9714 13.5356L33.3811 13.5356C35.5121 13.5356 37.4089 12.185 38.106 10.1712L40.7028 2.66943" stroke="#0D0B70" stroke-width="2"></path><path d="M1 20.2866C1 19.1623 1.37892 18.0709 2.07559 17.1884L12.0365 4.57121C12.9847 3.37016 14.4307 2.66943 15.961 2.66943H48.118C50.9271 2.66943 53.185 4.98302 53.1165 7.79135L52.9425 14.9265C52.8763 17.6397 50.6579 19.8046 47.944 19.8046H37.5358C35.3239 19.8046 33.3749 21.2579 32.7437 23.3778L23.7963 53.4274C23.1651 55.5473 21.2161 57.0005 19.0043 57.0005H16.9815C13.6124 57.0005 11.2075 53.7362 12.2061 50.5185L18.6117 29.8783C19.6686 26.4727 16.078 23.4908 12.9244 25.1552L10.5154 26.4266C8.00689 27.7506 4.97 27.5683 2.63787 25.9537V25.9537C1.61209 25.2436 1 24.0753 1 22.8277V20.2866Z" stroke="#0D0B70" stroke-width="2"></path><pne x1="47.9721" y1="2.66943" x2="47.9721" y2="19.3867" stroke="#0D0B70" stroke-width="2"></pne><path d="M32.9823 24.0645L33.1541 24.116C35.2699 24.7513 36.4701 26.9816 35.8347 29.0974L34.5297 33.4436C33.8943 35.5594 31.6641 36.7596 29.5483 36.1243L29.3765 36.0727L32.9823 24.0645Z" stroke="#0D0B70" stroke-width="2"></path><path d="M56.1682 7.6869C61.1834 7.6869 62.8551 4.34345 62.8551 4.34345C62.8551 4.34345 64.9448 1 69.542 1" stroke="#16BC9C" stroke-width="2"></path><path d="M56.1682 12.6989C61.1834 12.6989 62.8551 9.35541 62.8551 9.35541C62.8551 9.35541 64.9448 6.01196 69.542 6.01196" stroke="#16BC9C" stroke-width="2"></path><path d="M56.1682 17.7206C61.1834 17.7206 62.8551 14.3771 62.8551 14.3771C62.8551 14.3771 64.9448 11.0337 69.542 11.0337" stroke="#16BC9C" stroke-width="2"></path></svg>`,
    description: 'XRF Material Verification Gun'
  }
]

const navigation = {
  enabled: true,
  prevEl: '.my-button-prev',
  nextEl: '.my-button-next'
}
</script>

<style scoped>
:deep(.my-button-prev) {
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 10;
}

:deep(.my-button-next) {
  position: absolute;
  top: 50%;
  right: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 10;
}
</style>
